<template>
  <div>
    <div class="nav-sub" v-if="isShow" :model="subNav">
      <div class="nav-sub-header">
        <span>{{ subNav.menuName }}</span>
      </div>
      <ul>
        <li class="nav-sub-item" :class="{active: activeName == item.menuName}" @click="active(item)"  v-for="item in subNav.children" :key="item.id" :model="item">
          <router-link :to="item.href">
            <span>{{ item.menuName }}</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="content-body" :class="{left180: isShow}">
      <router-view/>
    </div>
  </div>
</template>

<script>
  var subData =
    {
      'id': '20',
      'menuName': '负载均衡',
      'children': [
        {
          'menuName': '实例管理',
          'href': '/AdminAuth/'
        },
        {
          'menuName': '证书管理',
          'href': '/AdminAuth/backup'
        },
        {
          'menuName': '标签管理',
          'href': '/AdminAuth/recovery'
        },
        {
          'menuName': '日志管理',
          'href': '/AdminAuth/log'
        },
        {
          'menuName': '产品文档',
          'href': '/AdminAuth/recovery'
        }
      ]
    }
  export default {
    name: 'AdminAuth',
    data () {
      return {
        subNav: subData,
        activeName: ''
      }
    },
    computed: {
      isShow () {
        return this.subNav.children && this.subNav.children.length
      }
    },
    mounted () {
      this.activeName = this.subNav.children[0].menuName
    },
    methods: {
      active: function (item) {
        this.activeName = item.menuName
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .nav-sub {
    width: 180px;
    float: left;
    background-color: #eaedf1;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
  }
  .nav-sub-header{
    line-height: 5;
    color:#333;
    font-weight:600;
    text-indent: 20px;
    background: #d5dbe4;
  }
  .nav-sub-item{
    line-height: 2.5;
    color: #333;
    cursor: pointer;
    text-indent: 20px;
  }
  .nav-sub-item span{
    color:#333;
  }
  .nav-sub-item:hover,
  .nav-sub-item.active{
    background: #fafafa;
  }
  .content-body{
    position: absolute;
    width: auto;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0px;
    overflow: hidden;
    overflow-y: auto;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
  }
  .left180{
    left:180px;
  }
</style>
